﻿<script setup>
    //1、计算属性
    //import { reactive, computed } from 'vue';
    /*const author = reactive({
        name: 'John Doe',
        books: ['vue 3 - Advanced Guide',
            'vue 2 - Basic Guide',
            'vue 4 - The Mystery']
    });*/

    //一个计算属性ref
    /*const publishAuthorMessage = computed(() => {
        return author.books.length > 0 ? 'Yes' : 'NO'
    });*/

    //定义方法
  /*  function publishAuthorMessage() {
        return author.books.length > 0 ? 'Yes' : 'No';
    }*/


    //2、可写计算属性
    import { ref, reactive } from 'vue';

    const firstName = ref('John');
    const lastName = ref('Doe');

    // 可写计算属性
    const fullName = computed({
        // getter
        get() {
            return firstName.value + ' ' + lastName.value;
        },
        // setter
        set(newValue) {
            [firstName.value, lastName.value] = newValue.split(' ');
        }
    });

    fullName.value = 'Jone Doe';
</script>

<template>
    <!--1、computed计算属性-->
    <!--<p>has public books:</p>-->
    <!--<span>{{ author.books.length > 0 ? 'Yes':'No'}}</span>-->
    <!--使用计算属性  基于响应式依赖缓存-->
    <!--<span>{{publishAuthorMessage}}</span>-->
    <!--自定义方法-->
    <!--<span>{{publishAuthorMessage()}}</span>-->

    <!--2、可写计算属性-->
    <span>计算结果：</span>
    <span>{{ fullName }}</span>

</template>